<template>
  <div class="cartcontrol">
    <transition name="move">
      <div class="cart_decrease" v-show="cart.count>0" @click.stop.prevent="addCart($event,0)">
        <span class="inner icon-remove_circle_outline"></span>
      </div>
    </transition>
    <div class="cart_count" v-show="cart.count>0">{{cart.count}}</div>
    <div class="cart_add icon-add_circle" @click.stop.prevent="addCart($event,1)"></div>
  </div>
</template>
<!--type="text/ecmascript6"-->
<script type="text/ecmascript6">

  import Vue from 'vue';
  import {_post} from '@/api/mainApi';

  export default {
    name: 'cartControl',
    props: {
      cart: {
        type: Object,
        default: () => {
          return {
            count: 0,
            goods: {price: 0}
          };
        }
      }
    },
    methods: {
      decreaseCart(event) {// 减少数量
        if (!event._constructed) {// 阻止pc端点击后执行两次
          return;
        }
        if (this.cart.count) {
          this.cart.count--;
        }
      },
      addCart(event, type) {// 增加数量
        console.log('cart', this.cart);
        if (!event._constructed) {// 阻止pc端点击后执行两次
          return;
        }
        let count = type === 1 ? 1 : -1;

        if (count === -1 && this.cart.count === 1) {
          _post('frontend/cart/delete', {id: [this.cart.id]}).then(res => {
            if(this.cart.count>0){
               this.cart.count--;
            }
          });
        } else {
          _post('frontend/cart/increment', {
            id: this.cart.id,
            goods_id: this.cart.goods.id,
            count,
            sku_id: this.cart.sku_id
          }).then(
            res => {
              let data = res.data;
              console.log('dcart', data);
              // console.log(this.$root.eventHub);// 定义的新的公共实例eventHub，归按钮组件和购物车组件公用，传输数据
              if(data.code === 200){
                 this.$root.eventHub.$emit('cart.add', event.target); // 传输点击的目标元素
                  if(count === 1){
                  this.cart.count++;
                  }else{
                   this.cart.count--;
                  }
              }else{
                  this.$message.error(data.message);
              }

            }
          );
        }

      }
    }
  };

</script>

<style lang="stylus" rel="stylesheet/stylus">

  .cartcontrol
    font-size: 0
    .cart_decrease
      display: inline-block
      padding: 6px
      transition: all 0.4s linear
      .inner
        display: inline-block
        font-size: 24px
        line-height: 24px
        color: #dcc379
        transition: all 0.4s linear
      &.move-enter-active
        opacity: 1
        transform: translate3d(0, 0, 0) // 硬件加速，动画更流畅
        .inner
          transform: rotate(0)
      &.move-enter, &.move-leave-to
        opacity: 0
        transform: translate3d(24px, 0, 0)
        .inner
          transform: rotate(180deg)
    .cart_count
      display: inline-block
      vertical-align: top
      font-size: 10px
      line-height: 24px
      padding: 6px
      color: rgb(147, 153, 159)
    .cart_add
      display: inline-block
      padding: 6px
      font-size: 24px
      line-height: 24px
      color: #dcc379
</style>

